<template>
  <el-dialog
    title="人工派单"
    width="80%"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      label-width="120px"
      style="width: 100%;background: #ffffff">
      <el-table-column
        prop="deName"
        header-align="center"
        align="center"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="deGender"
        align="center"
        label="性别"
        width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.deGender === 1">男</el-tag>
          <el-tag v-if="scope.row.deGender === 0">女</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="dePhone"
        header-align="center"
        align="center"
        width="120"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="shopName"
        header-align="center"
        align="center"
        width="120"
        label="所属商铺">
      </el-table-column>
      <el-table-column
        prop="noSettlementMoney"
        header-align="center"
        align="center"
        label="配送费总额">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="visible = false">取消</el-button>
          <el-button type="text" @click="isCheck(scope.row.id)">指派</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,20,50,100]"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
  import {getDeliverymanList, getObj} from '@/api/delivery/deliveryman'
  import {appointObj} from '@/api/order/order'
  export default {
    data() {
      return {
        visible: false,
        dataForm:{
          orderId:'',
          shopId:'',
        },
        dataList: [],
        paymentCode: 1,
        dataListLoading: false,
        total: 0,
        currentPage: 1,
        size: 20,
      }
    },
    methods: {
      init (id,shopId) {
        this.dataForm.orderId = id
        this.dataForm.shopId = shopId
        this.visible = true
        this.getList()
      },
      getList(params) {
        this.tableLoading = true
        getDeliverymanList({
          shopId:this.dataForm.shopId,
          current: this.currentPage,
          size: this.size
        }, params).then(response => {
          this.dataList = response.data.data.records
          this.tableLoading = false
        })
      },
      isCheck(deliveryId) {
        this.$confirm(`确定指派该订单吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = new FormData()
          params.append('deliveryId',deliveryId)
          params.append('orderId',this.dataForm.orderId)
          appointObj(params).then(res => {
            if (res.data.code == 0) {
              this.$message.success('指派成功')
              this.$emit('handlerAssignmentOrder')
            } else {
              this.$message.error('指派失败')
            }
          })
        }).catch(res => {
        })
      },
      handleSizeChange(val) {
        this.this.size = val
        this.getList(val)
      },
      handleCurrentChange(val) {
        this.this.currentPage = val
        this.getList(val)
      },
    },
  }
</script>
